<template>
	<svg :class="svgClass" aria-hidden="true">
		<defs>
			<linearGradient :id="`gradient-${randomNum}`" v-bind="direction">
				<stop :stop-color="props.color" />
				<stop offset="1" :stop-color="props.gradientColor" />
			</linearGradient>
		</defs>
		<use :xlink:href="iconName" :fill="svgFill" />
	</svg>
</template>
<script setup>
	import { computed } from 'vue'
	let randomNum = Math.random();

	const props = defineProps({
		// 图标名称
		name: {
			type: String,
			required: true
		},
		// 单一颜色
		color: {
			type: String,
			default: ''
		},
		// 渐变色
		gradientColor: {
			type: String,
			default: ''
		},
		// 渐变色角度
		gradientAngle: {
			type: String,
			default: '1'
		}
	})
	// svg的外层div的class
	const svgClass = computed(() => {
		if (props.name) {
			return `svg-icon icon-${props.name}`
		} else {
			return 'svg-icon'
		}
	})
	// svg图标的名称
	const iconName = computed(() => {
		return `#icon-${props.name}`
	})
	// svg填充颜色，如果gradientColor值存在，就是渐变色，否则是单一颜色
	const svgFill = computed(() => {
		if (props.gradientColor) {
			return `url(#gradient-${randomNum})`
		}
		return props.color
	})
	// 渐变色方向
	const direction = computed(() => {
		switch (props.gradientAngle) {
			case '1':
				return { x1: '0%', x2: '100%', y1: '0%', y2: '0%' }
			case '2':
				return { x1: '0%', x2: '100%', y1: '100%', y2: '0%' }
			case '3':
				return { x1: '0%', x2: '0%', y1: '100%', y2: '0%' }
			case '4':
				return { x1: '100%', x2: '0%', y1: '100%', y2: '0%' }
			case '5':
				return { x1: '100%', x2: '0%', y1: '0%', y2: '0%' }
			case '6':
				return { x1: '0%', x2: '100%', y1: '0%', y2: '100%' }
			case '7':
				return { x1: '0%', x2: '0%', y1: '0%', y2: '100%' }
			case '8':
				return { x1: '100%', x2: '0%', y1: '0%', y2: '100%' }
			default:
				return { x1: '0%', x2: '100%', y1: '0%', y2: '0%' }
		}
	})
</script>

<style scoped>
	.svg-icon {
		width: 1em;
		height: 1em;
		fill: currentColor;
		vertical-align: middle;
	}
</style>